<template>
  <div class="step_container">
    <!-- 步骤一 -->
    <div class="step_box">
      <div class="step_tit">
        <span class="step_no">4</span>
        <span>邮箱验证</span>
      </div>
      <div class="step_desc font_color">
        <p>
          即使你的账号密码泄露，没有手机上的验证码，别人也操作时,系统会要求谷歌验证码,以确认是本人操作。
          无法登录,在进行提现、修改账户信息、API设置等敏感
        </p>
      </div>
    </div>
    <!-- 温馨提示 -->
    <div class="notice_box">绑定谷歌验证器前需要验证您的账户</div>
    <!-- 邮箱验证码 -->
    <div class="input_box">
      <div class="input_label">邮箱验证码<span class="cut_text">*</span></div>
      <div class="input input_psw">
        <input type="text" placeholder="请输入" v-model="ruleForm.emailCode" />
        <div class="is_open primary_text" @click="getCode">
          {{ curTime ? `${curTime}s` : "发送验证码" }}
        </div>
      </div>
      <div class="input_rule">{{ rules.emailCode.rule }}</div>
      <div class="font_color">
        请输入邮箱账号 {{ user.userInfo.email }} 的6位验证码
      </div>
    </div>
    <!-- 邮箱验证码 -->
    <div class="input_box">
      <div class="input_label">谷歌验证码<span class="cut_text">*</span></div>
      <div class="input input_psw">
        <input type="text" placeholder="请输入" v-model="ruleForm.googleCode" />
      </div>
      <div class="input_rule">{{ rules.googleCode.rule }}</div>
      <div class="font_color">请输入谷歌验证器的6位验证码</div>
    </div>
    <!-- 问题 -->
    <div class="pro primary_text">安全验证不可用？</div>
    <div class="operate_btn" @click="onConfirm">下一步</div>
  </div>
</template>

<script setup lang="ts">
import { googleBind } from "@/api/auth";
import { getProfile, sendEmail } from "@/api/user";
import { useUserInfo } from "@/stores/userInfo";
import { ElMessage } from "element-plus";
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";

// 获取父组件属性和方法
const emits = defineEmits();
// 获取路由对象
const router = useRouter();
// 获取用户xx
const user = useUserInfo();
// 倒计时变量
const curTime = ref(0); // 倒计时
const isFlag = ref(true); // 控制频繁发送
// 表单数据
const ruleForm: any = ref({
  emailCode: "",
  googleCode: "",
  googleToken: "",
});
// 表单验证
const rules: any = reactive({
  emailCode: {
    msg: "请输入邮箱验证码",
    rule: "",
  },
  googleCode: {
    msg: "请输入谷歌验证码",
    rule: "",
  },
});

// 获取验证码
const getCode = () => {
  if (curTime.value) return;
  if (!isFlag.value) return ElMessage.error("请勿频繁请求！");
  isFlag.value = false;

  // 请求邮箱验证码
  sendEmail({ email: user.userInfo.email, useTo: "8" }).then((res: any) => {
    downCount();
    ElMessage.success("获取验证码成功，请注意您的邮箱！");
  });
};

// 确认
const onConfirm = () => {
  if (validateForm()) {
    // 组装数据
    let resDate = {
      ...ruleForm.value,
      googleToken: sessionStorage.getItem("key"),
    };
    googleBind(resDate).then((res: any) => {
      ElMessage.success("绑定谷歌成功！");
      getProfile().then((res: any) => {
        user.setUserInfo(res.data);
        emits("success");
      });
    });
  }
};

// 表单验证
const validateForm = () => {
  for (let k in rules) {
    // 验证是否为空
    if (ruleForm.value[k].trim() == "") {
      rules[k].rule = rules[k].msg;
      return false;
    }
  }
  for (let k in rules) {
    rules[k].rule = "";
  }
  return true;
};

// 验证码倒计时
const downCount = () => {
  let num = 60;
  curTime.value = num;
  let timer = setInterval(() => {
    if (num < 1) {
      clearInterval(timer);
      isFlag.value = true;
    } else {
      num--;
      curTime.value = num;
    }
  }, 1000);
};
</script>

<style lang="scss" scoped>
.input_box {
  margin-top: 40px;
  .font_color {
    font-size: 14px;
  }
}
.pro {
  margin-top: 30px;
}
</style>
